<template>
   <div class="">
   <button @click="random">random</button>
    <transition-group move-class="mmm" class="wraps" tag="div">
        <div class="items" :key="item.id" v-for="item in list">{{ item.number }}</div>
    </transition-group>
   </div>
</template>

<script setup lang='ts'>
import {ref ,reactive} from 'vue'
import _ from 'lodash'
let list = ref(Array.apply(null,{length:81}as number[]).map((_,index)=>{
  return {
    id:index,
    number:(index%9) +1
  }
}))
console.log(list.value);
const random = () =>{
  list.value = _.shuffle(list.value)
}
</script>

<style lang="less" scoped>
.wraps{
  display: flex;
  flex-wrap:wrap;
  width: calc(25px * 10 + 9px);
  .items{
    width: 25px;
    height: 25px;
    border:1px solid #ccc;
    display: flex;
    justify-content: center;
  }
}
.mmm{
  transition: all 1s;
}
</style>
